<template>
  <div id="app">
    <div class="titles">
      <p>我的订单</p>
    </div>
    <div class="orders">
      <!--      {{this.tableData}}-->
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="bookname"
            label="订单详情"
            width="550"
            style="height: 80px">
          <template #default="scope">
            订单号：{{ scope.row.order.orderId }}<br/>
            <span v-for="item in scope.row.book">
              {{ item.bookname }}
            </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="收货人">
          <template #default="scope">
            {{ scope.row.order.orderContacts }}
          </template>
        </el-table-column>
        <el-table-column
            prop="province"
            label="金额"
            width="120">
          <template #default="scope">
            {{ scope.row.order.orderMoney }}
          </template>
        </el-table-column>
        <el-table-column
            prop="city"
            label="状态"
            width="120">
          <template #default="scope">
            {{ scope.row.order.orderStatus == 0 ? '未支付' : '已支付' }}<br>
            <a>订单详情</a>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" v-if="scope.row.order.orderStatus==0" @click="pay(scope.row)">去支付</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Button from "../../components/Button";

export default {
  name: "OrderInformation",
  components: {Button},
  methods: {
    handleClick(row) {
      console.log(row);
    },
    pay(row){
      var pay = {
        orderId: row.order.orderId,
        orderPrice: row.order.orderMoney
      }
      console.log(pay)
      //下单成功跳转付款页面
      this.$router.push({
        name: "Payment",
        params:pay
      })
    }


  },

  created() {
    var vm = this
    axios.get("http://localhost:8082/book-manager/order/findAllOrder?userId=" + this.$store.getters.getUser.userid).then(function (resp) {
      console.log(resp.data)
      vm.tableData = resp.data
    })
  },

  data() {
    return {
      tableData: [
        {
          order: {
            "id": 13,
            "orderId": "202103011304081111",
            "orderMoney": 2400,
            "orderStatus": 0,
            "orderContacts": null,
            "orderTel": null,
            "orderAddr": null,
            "establishDate": "2021-03-25T16:00:00.000+0000",
            "updateDate": "2021-03-25T16:00:00.000+0000",
            "userid": 1111
          },
          book: [
            {
              "bookid": 111111,
              "bookname": "算法4",
              "booktype": "技术",
              "ebookaddress": "http://120.79.253.99/PDF/鸟哥的 Linux 私房菜电子书.pdf",
              "isfree": 0,
              "isentity": 500,
              "howintegral": 0,
              "bookprice": 300
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
#app {
  padding-left: 0;
  width: 100%;
}

.titles {
  height: 60px;
  background-color: white;
  color: black;
  padding: 0;
  text-align: left;
  margin-top: 30px;

}

.titles p {
  padding-top: 20px;
  margin-left: 0;
  margin-left: 10px;
  font-size: 20px;
  vertical-align: middle;
}

.orders {
  background-color: white;
  text-align: center;
}

.order {
  border: 1px solid red;
  margin: 0 auto;
  margin-top: 30px;
  width: 98%;
}

.order p {
  background-color: #B3C0D5;
}

.orderTable {
  height: 40px;
  padding-top: 30px;
  border: 1px solid black;
  margin: 0 auto;
  margin-top: 30px;
  width: 98%;
}
</style>
